import { useInitState } from '@/hooks'
import { getEditUseAction, updateUserAction } from '@/store/actions/profile'
// import { RootState } from '@/types/store'
import { Button, List, DatePicker, NavBar, Popup, Toast } from 'antd-mobile'
import classNames from 'classnames'
// 导入弹层的内容组件
import EditInput from './components/EditInput'
import { useState } from 'react'
import { useDispatch } from 'react-redux'

import styles from './index.module.scss'

const Item = List.Item
// 昵称 或简介修改类型
export type InputType = {
  type: '' | 'name' | 'intro' //区分当前是修改昵称还是简介
  value: string //当前修改的最新值
  show: boolean //控制弹层显隐
}

const ProfileEdit = () => {
  const dispatch = useDispatch()
  // // 1. 获取用户回填数据
  // useEffect(() => {
  //   dispatch<any>(getEditUseAction())
  // }, [dispatch])
  // // 2. 从redux获取回填用户信息
  // const { edit } = useSelector((state: RootState) => state.profile)
  // 1. 数据回填
  const { edit } = useInitState(getEditUseAction, 'profile')
  const { photo, name, intro, gender, birthday } = edit
  // 2. 数据修改
  const [isShow, setShow] = useState<InputType>({
    type: '',
    value: '',
    show: false,
  })
  // 控制弹层显示
  // 打开修改昵称
  const showModal = () => {
    setShow({
      type: 'name',
      value: name,
      show: true,
    })
  }
  // 关闭修改昵称
  const hideModal = () => {
    setShow({
      type: '',
      value: '',
      show: false,
    })
  }
  //打开修改简介
  const showIntroModal = () => {
    setShow({
      type: 'intro',
      value: intro || '暂无简介',
      show: true,
    })
  }
  // 修改个人信息
  const onUpdateUser = async (type: string, value: string) => {
    console.log('子传给父的数据', value)
    try {
      await dispatch<any>(updateUserAction({ [type]: value }))
      Toast.show({ icon: 'success', content: '更新成功' })
      hideModal()
    } catch (e) {
      console.log(e)
    }
  }
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}>
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              // 指定Item组件右边内容
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={photo} alt="" />
                </span>
              }
              arrow>
              头像
            </Item>
            <Item arrow extra={name} onClick={showModal}>
              昵称
            </Item>
            <Item
              onClick={showIntroModal}
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {intro || '暂无简介'}
                </span>
              }>
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={gender === 0 ? '男' : '女'}>
              性别
            </Item>
            <Item arrow extra={birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn">退出登录</Button>
        </div>
      </div>

      {/* 修改用户信息的弹出层 */}
      {/* destroyOnClose这个意思是关闭弹层的时候销毁组件 */}
      <Popup destroyOnClose visible={isShow.show} position="left">
        {/* 弹层内容 */}
        {/* <h1>我是弹层内容</h1> */}
        <EditInput
          type={isShow.type}
          onUpdateUser={onUpdateUser}
          hideModal={hideModal}
          value={isShow.value}
        />
      </Popup>
    </div>
  )
}

export default ProfileEdit
